<template>
  <div class="body">
    <div class="title"><h1>基于VPM的植被生产力分析评估系统</h1></div>
    <el-form
      :rules="rules"
      ref="loginForm"
      :model="loginForm"
      class="loginContainer"
    >
      <div class="loginTitle"><i class="el-icon-s-custom"></i></div>
      <el-form-item prop="username">
        <el-input
          prefix-icon="el-icon-user-solid"        
          v-model="loginForm.username"
          placeholder="请输入用户名"
          size="medium"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          prefix-icon="el-icon-lock"
          type="password"
          v-model="loginForm.password"
          placeholder="请输入密码"
          size="medium"
        >
        </el-input>
      </el-form-item>

      <el-button
        class="btn-login"
        round
        plain
        type="success"
        @click="login('loginForm')"
        >登 录</el-button
      >
      <el-button class="btn-register" plain round type="success" @click="register"
        >注 册</el-button
      >
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      captchaUrl: "",
      loginForm: {
        username: "",
        password: "",
      },
      checked: true,
      //输入提示，失去焦点就会提示
      //检验规则，
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 5,
            max: 14,
            message: "长度在 5 到 14 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "密码长度要大于6", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.loginForm.username = this.$route.query.userName
  },
  beforeDestroy() {},
  methods: {
    login(loginForm) {
      //后台检验
      this.$refs[loginForm].validate((valid) => {
        if (valid) {
          // this.$message.success("登录成功");
          this.axios
            .post("http://192.168.253.193:9990/user/login", {
              //用户名，密码
              userName: this.loginForm.username,
              userPwd: this.loginForm.password,
            })
            .then((response) => {
              if (response.data.code === 20000) {
                //跳转到系统主界面
                this.$router.push({
                  path: "/mainpage",
                });
                this.$message.success("登录成功");
              } else {
                this.$message.error("登录出错请重新输入");
              }
            });
        } else {
          //登录失败
          this.$message.error("登录出错请重新输入");
          return false;
        }
      });
    },
    register() {
      //跳转到注册界面
      this.$router.push({
        path: "/register",
      });
    },
  },
};
</script>

<style scoped>
.body {
  width: 100vw;
  height: 100vh;
  background-image: url("/src/assets/login3.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.title{
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 15px 30px rgba(0,0,0,.5);
}
.title h1{
  font-size: 40px;
  color: rgb(14, 189, 35);
  font-family: "华文楷体";
  line-height: 50px;
  text-align: center;
}
.loginContainer {
  position: relative;
  border-radius: 15px;
  background-clip: padding-box;
  margin: auto;
  margin-top: 100px;
  width: 30%;
  height: 50%;
  padding: 20px 70px 15px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 15px 30px rgba(0,0,0,.5);
}
.loginTitle {
  margin: 0px auto 20px auto;
  text-align: center;
  width: 90px;
  height: 90px;
  font-size: 60px;
  border: 3px solid rgb(103, 194, 58);
  border-radius: 50%;
  color: rgb(103, 194, 58);
}
.btn-login {
  position: absolute;
  margin-top: 3%;
  left: 20%;
  width: 25%;
  font-weight: 600;
}
.btn-register {
  position: absolute;
  margin-top: 3%;
  right: 20%;
  width: 25%;
  font-weight: 600;
}
</style>